<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1 {
            width: 147px;
            height: 60px;
            text-align: center;
            background: #f6f7f9;
            border: 2px solid #000;
            border-radius: 100px;
            line-height: 60px;
        }
        .d2 {
            width: 147px;
            height: 60px;
            text-align: center;
            background: #f6f7f9;
            border: 2px solid #000;
            border-top-left-radius: 10px;
            border-top-right-radius: 20px;
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 40px;
            line-height: 60px;
        }

        .d3 {
            width: 147px;
            height: 60px;
            background: gray;
            border-radius: 10px 20px;
        }
        .d4 {
            width: 147px;
            height: 60px;
            background: gray;
            border-radius: 10px 20px 30px;
        }
        .cycle {
            width: 300px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            background: pink;
            border-radius: 150px;
        }
    </style>
</head>
<body>
    <!-- 
    用复合样式 border-radius 设定元素圆角
    d1 如果只给一个值，表示四个角都生效
    d2 可分别用 border-top-left-radius ... 分别设置四个角
    d3 如果给两个值，第一个值作用于左上、右下；第二个值作用于左下、右上
    d4 如果给三个值，第一个值作用于左上；第二个值作用于左下、右上；第三个值作用于右下
    如果给四个值，分别作用域左上、右上、右下、左下（从左上起顺时针）
    可分别设置四个角
    
    -->
    <div class="d1">舞蹈</div>
    <hr>
    <div class="d2">唱歌</div>
    <hr>
    <div class="d3">喝酒</div>
    <hr>
    <div class="d4">烫头</div>
    <hr>
    <div class="cycle">我是一个圆</div>
</body>
</html>